<template>
  <div class="category-box">
    <div class="container">
      <!-- 面包屑 -->
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem>{{ list.name }}</XtxBreadItem>
      </XtxBread>
      <!-- 轮播图 -->
      <div class="banner-box">
        <XtxCarousel :sliders="sliders.banner" autoPlay></XtxCarousel>
      </div>
      <!-- 全部分类  -->
      <div class="sub-list">
        <h3>全部分类</h3>
        <ul>
          <li v-for="item in list.children" :key="item.id">
            <RouterLink to="/">
              <img :src="item.picture" alt="" />
              <p>{{ item.name }}</p>
            </RouterLink>
          </li>
        </ul>
      </div>
      <!-- 分类商品 -->
      <div class="ref-goods" v-for="item in list.children" :key="item.id">
        <div class="head">
          <h3>- {{ item.name }} -</h3>
          <p class="tag">温暖柔软，品质之选</p>
        </div>
        <XtxMore />
        <div class="body">
          <GoodsItem v-for="i in item.goods" :key="i.id" :goods="i" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { computed, ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { getoneCategory } from '@/api/goods.js'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'
export default {
  name: 'Categort',
  setup() {
    const store = useStore()
    const route = useRoute()
    // 获取vuex里的轮播图，因为轮播图只有一套所以我自己优化了下，直接从vuex中获取，减少http请求
    const sliders = computed(() => {
      return store.state.category
    })
    // 获取分类商品
    const list = ref({})
    const getCategory = async id => {
      const data = await getoneCategory(id)
      list.value = data.result
    }
    onMounted(() => {
      getCategory(route.params.id)
    })
    // 路由规则的改变才会引起页面刷新接口重新调用，而路由参数变化则不会
    // 通过onBeforeRouteUpdate监听参数变化，重新调用接口
    // 三个参数，to：到哪去，from：从哪来，next：下一步，和beforeEach相似（全局）
    onBeforeRouteUpdate((to, from, next) => {
      getCategory(to.params.id)
      next()
    })
    return { sliders, list }
  }
}
</script>
<style lang="less" scoped>
.banner-box {
  width: 100%;
  height: 500px;
  .xtx-carousel {
    width: 100%;
    height: 100%;
  }
}
.sub-list {
  width: 100%;
  background: #fff;
  margin-top: 20px;
  h3 {
    font-size: 28px;
    font-weight: 400;
    color: #666;
    line-height: 100px;
    text-align: center;
  }
  ul {
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    li {
      margin-top: 20px;
      margin-bottom: 20px;
      &:hover {
        p {
          color: #27ba9b;
        }
      }
    }
    img {
      width: 100px;
      height: 100px;
      object-fit: cover;
    }
    p {
      line-height: 40px;
      text-align: center;
    }
  }
}
.ref-goods {
  background-color: #fff;
  margin-top: 20px;
  position: relative;
  .xtx-more {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .head {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 25px;
    h3 {
      font-size: 28px;
      font-weight: 400;
      color: #999;
      margin-bottom: 15px;
    }
    .tag {
      text-align: center;
      color: #999;
      font-size: 20px;
      margin-bottom: 20px;
    }
  }
  .body {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 65px 30px;
  }
}
</style>
